<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>CMS</title>
    <link rel="stylesheet" th:href="@{../myresource/layui/css/layui.css}" media="all" />
    <link rel="stylesheet" th:href="@{../myresource/css/global.css}" media="all"/>
    <link rel="stylesheet" th:href="@{../myresource/css/font-awesome.min.css}"/>
    <script type="text/javascript" th:src="@{../myresource/js/jquery-1.8.2.min.js}"></script>
    <script type="text/javascript" th:src="@{../myresource/layui/layui.js}"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin" style="border-bottom: solid 5px #1aa094;border-bottom:solid 5px #3280FC;">
    <div class="layui-header header header-demo">
        <div class="layui-main">
            <div class="admin-login-box">
                <a class="logo" style="left: 0;" href="http://beginner.zhengjinfan.cn/demo/beginner_admin/">
                    <span style="font-size: 22px;">BeginnerAdmin</span>
                </a>
                <div class="admin-side-toggle" style="background-color: #3280FC;">
                    <i class="fa fa-bars" aria-hidden="true" style="margin: 7px;"></i>
                </div>
                <div class="admin-side-full" style="background-color: #3280FC;">
                    <i class="fa fa-life-bouy" aria-hidden="true" style="margin: 7px;"></i>
                </div>
            </div>
            <ul class="layui-nav admin-header-item">
                <li class="layui-nav-item">
                    <a href="javascript:;" class="admin-header-user">
                        <img th:src="@{../myresource/images/0.jpg}"/>
                        <span shiro:hasRole="admin">管理员</span>
                        <span shiro:hasRole="user">会员</span>
                    </a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;"><i class="fa fa-user-circle" aria-hidden="true"></i> 个人信息</a>
                        </dd>
                        <dd>
                            <a href="javascript:;"><i class="fa fa-gear" aria-hidden="true"></i> 设置</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">
                                <i class="fa fa-lock" aria-hidden="true" style="padding-right: 3px;padding-left: 1px;"></i> 锁屏 (Alt+L)
                            </a>
                        </dd>
                        <dd>
                            <a th:href="@{/logout}"><i class="fa fa-sign-out" aria-hidden="true"></i> 注销</a>
                        </dd>
                    </dl>
                </li>
            </ul>
            <ul class="layui-nav admin-header-item-mobile">
                <li class="layui-nav-item">
                    <a href="login.html"><i class="fa fa-sign-out" aria-hidden="true"></i> 注销</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-side layui-bg-black" id="admin-side">
        <div class="layui-side-scroll" id="admin-navbar-side" lay-filter="side"></div>
    </div>
    <div class="layui-body" style="bottom: 0;border-left: solid 3px #3280FC;" id="admin-body">
        <div class="layui-tab admin-nav-card layui-tab-brief" lay-filter="admin-tab">
            <ul class="layui-tab-title" id="uls">
                <li class="layui-this">
                    <i class="fa fa-dashboard" aria-hidden="true"></i>
                    <cite>控制面板</cite>
                </li>
            </ul>
            <div class="layui-tab-content" style="min-height: 150px; padding: 5px 0 0 0;">
                <div class="layui-tab-item layui-show">
                    <iframe th:src="@{/main}" src="http://www.hao123.com" style="overflow: hidden;" id="iframe"></iframe>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-footer footer footer-demo" id="admin-footer">
        <div class="layui-main">
            <p>2016 &copy;
                <a href="http://m.zhengjinfan.cn/">m.zhengjinfan.cn/</a> LGPL license
            </p>
        </div>
    </div>
    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>

</div>
</body>
<script th:inline="javascript">
    /** index.js By Beginner Emain:zheng_jinfan@126.com HomePage:http://www.zhengjinfan.cn */
    var tab;
    layui.config({
        base: '../myresource/js/',
        version: new Date().getTime()
    }).use(['element', 'layer', 'navbar', 'tab'], function () {
        var element = layui.element(),
            $ = layui.jquery,
            layer = layui.layer,
            navbar = layui.navbar();
        tab = layui.tab({
            elem: '.admin-nav-card' //设置选项卡容器
            ,
            //maxSetting: {
            //	max: 5,
            //	tipMsg: '只能开5个哇，不能再开了。真的。'
            //},
            contextMenu: true,
            onSwitch: function (data) {
                /* console.log(data.id); //当前Tab的Id
                 console.log(data.index); //得到当前Tab的所在下标
                 console.log(data.elem); //得到当前的Tab大容器

                 console.log(tab.getCurrentTabId())*/
            }
        });
        //iframe自适应
        $(window).on('resize', function () {
            var $content = $('.admin-nav-card .layui-tab-content');
            $content.height($(this).height() - 147);
            $content.find('iframe').each(function () {
                $(this).height($content.height());
            });
        }).resize();


        //设置navbar
        navbar.set({
            spreadOne: true,
            elem: '#admin-navbar-side',
            cached: true,
            data:[[${menu}]],
            /*cached:true,
             url: 'datas/nav.json'*/
        });
        //渲染navbar
        navbar.render();
        //监听点击事件
        navbar.on('click(side)', function (data) {
            tab.tabAdd(data.field);
        });

        $('.admin-side-toggle').on('click', function () {
            var sideWidth = $('#admin-side').width();
            if (sideWidth === 200) {
                $('#admin-body').animate({
                    left: '0'
                }); //admin-footer
                $('#admin-footer').animate({
                    left: '0'
                });
                $('#admin-side').animate({
                    width: '0'
                });
            } else {
                $('#admin-body').animate({
                    left: '200px'
                });
                $('#admin-footer').animate({
                    left: '200px'
                });
                $('#admin-side').animate({
                    width: '200px'
                });
            }
        });
        $('.admin-side-full').on('click', function () {
            var docElm = document.documentElement;
            //W3C
            if (docElm.requestFullscreen) {
                docElm.requestFullscreen();
            }
            //FireFox
            else if (docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
            }
            //Chrome等
            else if (docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
            }
            //IE11
            else if (elem.msRequestFullscreen) {
                elem.msRequestFullscreen();
            }
            layer.msg('按Esc即可退出全屏');
        });



        //手机设备的简单适配
        var treeMobile = $('.site-tree-mobile'),
            shadeMobile = $('.site-mobile-shade');
        treeMobile.on('click', function () {
            $('body').addClass('site-mobile');
        });
        shadeMobile.on('click', function () {
            $('body').removeClass('site-mobile');
        });
    });

</script>
</html>